<template>
  <div class="user">
    <div class="icon">
      <img
        src="https://img.ddtouxiang.com/upload/touxiang/20230331/0331192112181.png_preview.jpg"
      />
      <div class="username">
        {{ "大胖虎" }}
      </div>
    </div>
    <div class="option">
      <div class="space"></div>
      <van-cell-group>
        <van-field
          v-model="form.name"
          label="姓名"
          left-icon="contact"
          :disabled="isdisable"
          class="option-item"
        />
        <div class="space"></div>
        <van-field
          v-model="form.phone"
          label="手机号"
          left-icon="contact"
          :disabled="isdisable"
        />
        <div class="space"></div>
        <van-field
          v-model="form.id"
          label="身份证号"
          left-icon="contact"
          :disabled="isdisable"
        />
        <div class="space"></div>
        <van-field
          v-model="form.password"
          type="password"
          label="密码"
          left-icon="contact"
          :disabled="isdisable"
        />
      </van-cell-group>
      <div class="space"></div>
      <div class="btns">
        <van-button round type="danger" @click="editForm">{{isdisable?'编辑资料':"取消编辑"}}</van-button>
        <van-button round type="danger" @click="showActionSheet"
          >退出登录</van-button
        >
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "User",
  data() {
    return {
      form: {
        name: "胖虎",
        phone: "1212",
        id: "1212",
        password: "11111",
      },
      isdisable: true,
    };
  },

  methods: {
    onSelect(item) {
      // 点击选项时默认不会关闭菜单，可以手动关闭
      this.show = false;
      Toast(item.name);
    },
    onCancel() {},
    showActionSheet() {
      this.show = true;
    },
    editForm() {
      console.log(1);
      this.isdisable =!this.isdisable;
    },
  },
};
</script>

<style scoped>
.user {
  background: #4385f3;
  height: 100vh;
}
.icon {
  margin: 0 auto;
  margin-bottom: 130px;
  width: 80px;
  height: 80px;
}
img {
  margin-top: 50%;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.username {
  margin-top: 20px;
  text-align: center;
}
.option {
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  height: 100%;
  background: #ffffff;
}
.option-item {
  margin-top: px;
}
.space {
  height: 25px;
}
.btns {
  width: 100%;
  display: flex;
  justify-content: space-around;
}
</style>